{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/wallet.css" />
{/block}
{block name="pageType"}takeOut{/block}
{block name="main" }
<div class="page-bd">
	<div class="goodslist">
		<ul>


		</ul>
	</div>
</div>
<div class="addType fs32 color_w fw_b BGcolor_r">
	添加提现方式
</div>
<!-- 支付方式 -->
<div class="model">
	<div class="modelBg"></div>
	<div class="modelContent">
		<div class="closeBox"><img src="__STATIC__/mobile/default/images/close_icon.png" alt=""></div>
		<div class="title fs36 color_3 fw_b">请选择账号类型</div>
		<div class="cantre">
			<label for="s12" data-type="bank">
				<div class="block">
					<div class="payType"><img src="__STATIC__/mobile/default/images/offlinePay.png" alt="">
						<div><span class="fs30 color_3">银行卡账号</span></div>
					</div>
					<div class="iconBox">
						<input type="radio" class="check" name="radiobox" id="s12">
						<i class="icon_checked"></i>
					</div>
				</div>
			</label>
			<label for="s13" data-type="alipay">
				<div class="block">
					<div class="payType"><img src="__STATIC__/mobile/default/images/AliPay.png" alt="">
						<div><span class="fs30 color_3">支付宝账号</span></div>
					</div>
					<div class="iconBox">
						<input type="radio" class="check" name="radiobox" id="s13">
						<i class="icon_checked"></i>
					</div>
				</div>
			</label>
			<label for="s14" data-type="weixin">
				<div class="block">
					<div class="payType"><img src="__STATIC__/mobile/default/images/weixinPay.png" alt="">
						<div><span class="fs30 color_3">微信账号</span></div>
					</div>
					<div class="iconBox">
						<input type="radio" class="check" name="radiobox" id="s14">
						<i class="icon_checked"></i>
					</div>
				</div>
			</label>
		</div>
	</div>
</div>

</div>
{literal}
<script type="text/html" id="liTpl">
{{each list as item index}}
<li>
	<object>
	  <div class="checkbox">
		<div class="block">
		  <div class="info">
		  {{if item.type == 'bank'}}
			<div class="left"><img src="__STATIC__/mobile/default/images/{{item.bank_code}}Bank.png" alt=""><span class="fs32 color_3 fw_b">{{item.bank_name}}</span></div>			
			<img src="__STATIC__/images/delectIcon.png" data-account_id="{{item.account_id}}" alt="" class="delect rightIcon">
			</div>
		    <div class="cardCode"><p class="fs38 color_3 num">{{item.bank_card_number}}</p><span class="fs28 color_9 fw_b">{{item.bank_cardholder}}</span></div> 
			{{else if item.type == 'alipay'}}
			<div class="left"><img src="__STATIC__/mobile/default/images/AliPay.png" alt=""><span class="fs32 color_3 fw_b">支付宝</span></div>			
			<img src="__STATIC__/images/delectIcon.png" data-account_id="{{item.account_id}}" alt="" class="delect rightIcon">
			</div>
				<div class="cardCode"><p class="fs38 color_3 num">{{item.alipay_account}}</p><span class="fs28 color_9 fw_b">{{item.alipay_user_name}}</span></div> 
			{{else}}
			<div class="left"><img src="__STATIC__/mobile/default/images/weixinPay.png" alt=""><span class="fs32 color_3 fw_b">微信</span></div>			
			<img src="__STATIC__/images/delectIcon.png" data-account_id="{{item.account_id}}" alt="" class="delect rightIcon">
			</div>
				<div class="cardCode"><p class="fs38 color_3 num">{{item.weixinpay_user_name}}</p><span class="fs28 color_9 fw_b">{{item.weixinpay_account}}</span></div> 
		  {{/if}}
		</div>
		<div class="swiped BGcolor_3">
		  <div class="delect" data-account_id="{{item.account_id}}"><img src="__STATIC__/mobile/default/images/delectIcon.png" alt=""></div>
		</div>   
	  </div>
	</object>
</li>
{{/each}}
</script>
{/literal}
{/block}

{block name="footer"}
<script>
	$(function () {
		$('.left-arrow').click(function () {
			window.location.href = '{:url("member/center/index")}'
		})

		$('.addType').on('click', function () {
			$('.model').show();
		})
		$('.closeBox').on('click', function () {
			$('.model').hide();
		})
		$('.model label').on('click', function () {
			var type = $(this).data('type');
			switch (type) {
				case "bank":
					window.location.href = '{:url("bankAdd")}'
					break;
				case "alipay":
					window.location.href = '{:url("alipayAdd")}'
					break;
				case "weixin":
					window.location.href = '{:url("wxAdd")}'
					break;
			}
		})
		//加载列表
		jq_ajax('{:url("member/api.withdraw/getList")}', '', function (res) {
			if (res.code == 0) {
				_alert(res.msg);
				return false;
			}
			$('.goodslist ul').html(template('liTpl', res));
			container();
		});
		//删除
		$('.goodslist').on('click', '.delect', function () {
			var obj = $(this);
			jq_ajax('{:url("member/api.withdraw/delAccount")}', 'account_id=' + obj.data('account_id'), function (res) {
				if (res.code == 0) {
					_alert(res.msg);
					return false;
				}
				obj.parents('li').remove();
			});
		})
	})

//	function container() {
//		//侧滑显示删除按钮
//		var expansion = null; //是否存在展开的list
//		var container = document.querySelectorAll('.goodslist object');
//		for (var i = 0; i < container.length; i++) {
//			var x, y, X, Y, swipeX, swipeY;
//			container[i].addEventListener('touchstart', function (event) {
//				x = event.changedTouches[0].pageX;
//				y = event.changedTouches[0].pageY;
//				swipeX = true;
//				swipeY = true;
//				if (expansion) {   //判断是否展开，如果展开则收起
//					expansion.className = "";
//				}
//			});
//			container[i].addEventListener('touchmove', function (event) {
//
//				X = event.changedTouches[0].pageX;
//				Y = event.changedTouches[0].pageY;
//				// 左右滑动
//				if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
//					// 阻止事件冒泡
//					event.stopPropagation();
//					if (X - x > 1) {   //右滑
//						event.preventDefault();
//						this.className = "";    //右滑收起
//					}
//					if (x - X > 1) {   //左滑
//						event.preventDefault();
//						this.className = "swipeleft";   //左滑展开
//						expansion = this;
//					}
//					swipeY = false;
//				}
//				// 上下滑动
//				if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
//					swipeX = false;
//				}
//			});
//			container[i].addEventListener('touchend', function (event) {
//				event.stopPropagation();
//			});
//		}
//	}
</script>
{/block}